<!--
 * @Author: Li Zengkun
 * @Date: 2022-09-10 16:32:24
 * @LastEditors: Li Zengkun
 * @LastEditTime: 2022-09-18 17:28:47
 * @Description: Layout
-->
<template>
  <div class="commen-layout">
    <el-container>
      <el-header>
        <Transition appear name="fade" mode="out-in">
          <Suspense>
            <NavBar />
          </Suspense>
        </Transition>
      </el-header>
      <el-container class="sub-container">
        <el-aside>
          <Suspense>
            <side-bar></side-bar>
          </Suspense>
        </el-aside>
        <el-main width="auto">
          <RouterView  v-slot="{ Component }" :key="route.fullPath">
            <template v-if="Component">
              <KeepAlive>
                <Suspense>
                  <!-- 主要内容 -->
                  <Transition appear name="fade" mode="out-in">
                    <component :is="Component"></component>
                  </Transition>

                  <!-- 加载中状态 -->
                  <template #fallback> 正在加载... </template>
                </Suspense>
              </KeepAlive>
            </template>
          </RouterView>
         
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
 
<script setup>
import { ref, reactive } from "vue";
import { RouterView } from "vue-router";
import NavBar from "@/components/NavBar.vue";
import SideBar from "@/components/SideBar.vue";
import { useRoute } from "vue-router";

const route = useRoute();
</script>

<style lang='less' scoped>
.commen-layout {
  height: 100vh;
  .el-header {
    height: var(--header-height);
    padding: 0 !important;
  }
  .sub-container {
    height: var(--container-height);
    .el-aside {
      height: 100%;
      width: auto;
    }
    .el-main {
      overflow-x: hidden;
      position: relative;
      background: var(--el-bg-color-page);
      .content {
        width: 80%;
        margin: 0 auto;
      }
      @media only screen and (max-width: 768px) {
        .content {
          width: 100%;
        }
      }
    }
  }
}
.fade-enter-active,
.fade-leave-active {
  transform: scale(1) translateX(0);
  transition: all 0.3s ease-out;
}
.fade-enter-from {
  transform: scale(3) translateX(-400px);
  opacity: 0;
}
.fade-leave-to {
  transform: scale(0.1) translateX(400px);
  opacity: 0;
}
</style>

